<template>
	<el-form
		ref="form"
		class="plr-1"
		label-position="top"
		:model="form"
		:disabled="saving"
		:rules="rules"
	>
		<el-form-item>
			<el-upload
				drag
				list-type="picture"
				:headers="{ token }"
				:before-upload="beforeUpload"
				:file-list="[form]"
				:data="fileData"
				:on-progress="uploadProgress"
				:on-error="uploadError"
				:on-success="uploadSuccess"
				:action="`${baseUrl}/index/uposs`"
				accept="image/*"
				:show-file-list="false"
			>
				<i class="el-icon-upload" />
				<div class="el-upload__text">将图片拖到此处，或<em>点击上传</em></div>
			</el-upload>
			<div class="images-item" v-if="form.img">
				<span
					class="el-icon-close remove"
					@click="handleRemove()"
					v-if="form.status != 'uploading'"
				/>
				<div class="images-item__show">
					<el-image
						class="img"
						:src="form.img"
						fit="contain"
						:preview-src-list="previewList"
					/>
					<div class="images-item__show--right">
						<div class="ellipsis">{{ form.name }}</div>
						<el-progress
							v-if="form.status == 'uploading'"
							:stroke-width="2"
							:percentage="form.percentage"
							:format="percentageFormat"
						/>
					</div>
				</div>
			</div>
		</el-form-item>
		<el-form-item label="选择微信客服类型" prop="contactType">
			<cl-select v-model="form.contactType" style="width: 100%">
				<el-option :value="3" label="获客助手" />
				<el-option :value="1" label="企业微信客服" />
				<el-option :value="2" label="小程序客服" />
			</cl-select>
			<div
				class="tips"
				style="line-height: normal; cursor: pointer;"
				@click="openHelp(1)"
				v-if="form.contactType == 2"
			>
				<span>需要先在微信小程序后台添加客服人员，否则接受不到客户发送的消息</span>
				<icon-svg name="help" class="ml-1" style="cursor: pointer;" />
			</div>
		</el-form-item>
		<template v-if="form.contactType == 1">
			<el-form-item label="企业微信corpId" prop="corpId">
				<div class="tips" style="line-height: normal;">如果在小程序中投放必须填此ID且企业微信和小程序是同个主体。否则会无法跳转</div>
				<el-input v-model="form.corpId" placeholder="企业微信corpId" />
			</el-form-item>

			<el-form-item label="企业微信客服链接" prop="link">
				<el-input v-model="form.link" placeholder="http://xxx.com 或 https://xxx.com" clearable />
			</el-form-item>
		</template>
		<template v-else-if="form.contactType == 3">
			<!-- <el-form-item prop="skip_mp_id" label="跳转获客助手">
				<cl-select v-model="form.skip_mp_id" style="width: 100%" filterable clearable>
					<el-option v-for="item in adMpList" :key="item.id" :value="item.id" :label="item.title" />
				</cl-select>
			</el-form-item> -->
			<el-form-item prop="mp_query" label="二跳页面参数">
				<div class="tips" style="line-height: normal;">默认不填为当前模板页面参数</div>
				<cl-select v-model="form.mp_query" style="width: 100%" filterable clearable>
					<el-option
						v-for="item in selfAdList"
						:key="item.id"
						:value="item.id"
						:label="item.name"
					/>
				</cl-select>
			</el-form-item>
		</template>
		<el-form-item prop="is_dialog" label="是否弹窗">
			<cl-select v-model="form.is_dialog" filterable style="width: 100%">
				<el-option :value="1" label="是" />
				<el-option :value="2" label="否" />
			</cl-select>
		</el-form-item>
		<el-form-item prop="width" label="图片宽度">
			<el-input v-model="form.width" placeholder="如不填写则默认是50" />
		</el-form-item>
		<el-form-item prop="height" label="图片高度">
			<el-input v-model="form.height" placeholder="如不填写则默认是50" />
		</el-form-item>
		<el-form-item prop="x" label="悬浮按钮距离右侧的距离">
			<el-input v-model="form.x" placeholder="如不填写则默认是10" />
		</el-form-item>
		<el-form-item prop="y" label="悬浮按钮距离底部的距离">
			<el-input v-model="form.y" placeholder="如不填写则默认是200" />
		</el-form-item>
		<setting-help ref="help" :helps="helps" />
	</el-form>
</template>

<script>
import { baseUrl } from "@/config/env";
import dayjs from "dayjs";
import { mapGetters } from "vuex";
import SettingHelp from "@/components/setting-help";
import miniList from "../../mixins/mini_list.js"
export default {
	mixins: [ miniList ],
	components: {
		SettingHelp
	},
	props: {
		saving: Boolean,
		view: {
			type: Object,
			default: () => ({})
		},
		adMpList: {
			type: Array,
			default: () => []
		},
		selfAdList: {
			type: Array,
			default: () => [{}]
		}
	},
	computed: {
		...mapGetters(["token"]),
		previewList() {
			const { img } = this.form;
			return [img];
		}
	},
	data() {
		return {
			baseUrl,
			fileData: {},
			form: this.view.options,
			rules: {
				link: [
					{ required: true, message: "请填写企业微信客服链接" },
					{ type: "url", message: "链接格式不正确" }
				],
				skip_mp_id: [{ required: false, message: "请选择跳转小程序" }],
			},
			helps: [
				{
					title: "如何添加微信小程序客服",
					content: [
						{
							title: `登录微信小程序后台，选择左侧菜单上面的客服菜单`,
							img: [require(`@/assets/img/help/wechatContact/1-1.png`)]
						},
						{
							title: `添加需要和客户沟通的客服的微信号`,
							img: [require(`@/assets/img/help/wechatContact/1-2.png`)]
						}
					]
				}
			]
		};
	},
	methods: {
		openHelp(index) {
			this.$refs.help.open(index);
		},
		handleRemove() {
			// this.form = { img: "" };
			this.form.img = "" ;
		},
		percentageFormat(percentage) {
			return this.toFixed(percentage) + "%";
		},
		// 上传文件
		beforeUpload(file) {
			this.fileData.name = file.name;
			this.fileData.dirname = "upload/" + dayjs().format("YYYY-MM-DD");
			this.fileData.type = 'ad_template'
		},
		// 文件上传时
		uploadProgress(evt, file) {
			Object.assign(this.form, {
				...file,
				img: file.url
			});
		},
		// 上传成功
		uploadSuccess(res, file) {
			// Object.assign(this.form, {
			// 	name: file.name,
			// 	status: file.status,
			// 	percentage: file.percentage,
			// 	img: res.data
			// });
			this.form = {
				...this.form,
				name: file.name,
				status: file.status,
				percentage: file.percentage,
				img: res.data
			}
			this.$message.success("上传成功");
			this.view.options = this.form;
		},
		// 上传失败
		uploadError(err) {
			const error = JSON.parse(err.message);
			this.$message.error(error.msg);
		}
	}
};
</script>

<style lang="scss" scoped>
::v-deep {
	.el-upload,
	.el-upload-dragger {
		width: 100%;
	}
	.el-upload-dragger {
		height: 120px;
		.el-icon-upload {
			margin-top: 15px;
		}
	}
}
.images-item {
	border: solid 1px #e0e0e0;
	border-radius: 3px;
	padding: 10px 8px 14px;
	margin: 10px 0;
	position: relative;
	.remove {
		position: absolute;
		right: 10px;
		top: 10px;
		color: grey;
		cursor: pointer;
	}
	&__show {
		display: flex;
		align-items: center;
		.img {
			width: 100px;
			height: 80px;
			border: solid 1px #e0e0e0;
			border-radius: 3px;
		}
		&--right {
			flex: 1;
			overflow: hidden;
			padding-left: 10px;
		}
	}
	::v-deep .el-form-item {
		margin-bottom: 0;
	}
}
</style>
